<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="200px">
      <el-form-item label="商铺名称" prop="typeName">
        <el-input v-model="queryParams.typeName" placeholder="请输入商铺名称" clearable @keyup.enter="handleQuery"
          class="!w-240px" />
      </el-form-item>
      <el-form-item label="启用" prop="isTel">
        <el-select v-model="queryParams.enable" placeholder="请选择是否启用" clearable class="!w-240px">
          <el-option v-for="dict in option" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px" /> 搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px" /> 重置
        </el-button>
        <el-button type="primary" @click="openForm('create', null)">
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="店铺类型名称" align="center" prop="typeName" />
      <el-table-column label="是否启用" align="center" prop="enable" />
      <el-table-column label="操作" align="center" class="w-120px">
        <template #default="scope">
          <el-button type="primary" plain @click="openForm('update', scope.row)">
            修改
          </el-button>
          <el-button type="danger" plain @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
      @pagination="getList" />
  </ContentWrap>
  <Dialog :title="dialogShowInputTitle" v-model="dialogShowInput"
    style="display: block;flex-direction: column;width: 700px;">
    <div>是否启用:
      <el-radio-group v-model="radio1" style="margin-left: 50px;" @change="changeRadio">
        <el-radio value="true" size="large" style="margin-right: 100px;">启用</el-radio>
        <el-radio value="false" size="large">不启用</el-radio>
      </el-radio-group>
    </div>
    <div style="display: flex;margin-top: 30px;">店铺类型名称:
      <el-input v-model="textarea" style="width: 500px;margin-left: 50px;" clearable placeholder="请输入店铺类型名称"
        @change="changeInput" />
    </div>
    <template #footer>
      <el-button @click="submitForm" type="primary">提交</el-button>
      <el-button @click="rejectSubmit">取消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { StoreTypeApi } from '@/api/shops/storeType'
const queryParams = reactive({
  pageNo: 1,
  pageSize: 20,
  enable: undefined,
  typeName: undefined
})
const message = useMessage()
const loading = ref(false)
const list = ref([])
const total = ref(0)
const { t } = useI18n() // 国际化
const id = ref('')
const queryFormRef = ref() // 搜索的表单
const textarea = ref('')
const radio1 = ref('')
const isTel = ref(1)
const dialogShowInputTitle = ref('')
const dialogShowInput = ref(false)
const option = reactive([
  { value: 1, label: '已启用' },
  { value: 0, label: '未启用' }
])
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
const rejectSubmit = () => {
  dialogShowInput.value = false
}
// 打开弹窗
const openForm = async (type: any, row: any) => {
  console.log('dd', row);

  dialogShowInput.value = true;
  if (type === 'create') {
    dialogShowInputTitle.value = '新增'
    radio1.value = ''
    textarea.value = ''
  }
  if (type === 'update') {
    dialogShowInputTitle.value = '修改'
    radio1.value = row.enable === '是' ? 'true' : 'false'
    textarea.value = row.typeName
    id.value = row.id
  }
};
// 删除
const handleDelete = async (row: any) => {
  await StoreTypeApi.deleteStoreType(row.id)
  message.success(t('common.delSuccess'))
  getList()
}
// 初始化数据列表
const getList = async () => {
  loading.value = true
  try {
    const data = await StoreTypeApi.getStoreTypePage(queryParams)
    const datalist = data.list.filter((item: any) => {
      item.enable = item.enable === true ? '是' : '否'
      return item
    })
    list.value = datalist
    total.value = data.total
  } finally {
    loading.value = false
  }
}
const changeRadio = (event: any) => {
  isTel.value = Number(event)
}

const changeInput = (event: any) => {
  textarea.value = event
}
// 表单的提交事件
const submitForm = async () => {
  const createQuerydata = {
    typeName: textarea.value,
    enable: radio1.value
  }
  const updateQuerydata = {
    typeName: textarea.value,
    enable: radio1.value,
    id: id.value
  }
  if (dialogShowInputTitle.value === '新增') {
    try {
      await StoreTypeApi.createStoreType(createQuerydata)
      message.success(t('common.createSuccess'))
      getList()
    } finally {
      dialogShowInput.value = false;
    }
  }
  if (dialogShowInputTitle.value === '修改') {
    try {
      await StoreTypeApi.updateStoreType(updateQuerydata)
      message.success(t('common.updateSuccess'))
      getList()
    } finally {
      dialogShowInput.value = false;
    }
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>